<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- <div id="message"></div> -->
  <!-- <div id="back"></div> -->
  <!-- built files will be auto injected -->
  <script>
      // SPA 可以帮助我们在不刷新页面的前提下动态改变浏览器地址栏中的URL地址，动态修改页面上所显示的资源
      // SPA 的优点：
      //            1.速度快，第一次下载完成静态文件，跳转不需要再次下载静态文件
      //            2.体验好，整个交互趋于无缝，更倾向于原生应用
      //            为前后端分离提供了一个实践的场所
      // 状态管理工具
      //   设计理念
      //      一个类似 object 的全局数据结构，被称之为 store
      //      只能调用特定的方法完成数据的修改
      // 每一个 Vuex 应用的核心就是 store(仓库)，store 基本上就是一个容器，它包含你的应用中大部分的状态 (state)
      // Vuex 和单纯的全局对象有什么区别
      //    Vuex 的状态存储是响应式的，当 Vue 组件 从 store 中读取状态的时候，如果 store 中的状态发生改变，那么相应的组件也会得到高效的更新
      //    你不能直接更改 store 中的状态，改变 store 中的状态唯一的途径就是显式的提交(commit) mutation。这样使得我们可以更好的跟踪每一个状态的变化

      // RESTful API 时目前比较成熟的一套互联网应用程序的API设计理念
      // RESTful 架构中，每一个网址代表一种资源（resource），所以网址中不能有动词，只能有名词
      // 而且所用的名词往往是和数据库的表格名对应，一般来说，数据库中的表都是同种记录的集合，所以AIP中的名词也应该使用复数
      // https://api.examples.com/teams  https://api.examples.com/teams/players
  </script>
</body>

</html>